Thumb

how to we show display error message in html using Jquery from Validation


11/23/2016 12:00:00 AM

 

Step : 1 

  • Open Visual studio.
  • Click on “File”>New>Project>Visual c#>Web> then provide your project name> then select “ok”> then click “MVC”>ok.
  • Create new folder and copy your downloaded fromValidation plugin file and paste it in this folder like as vedio.

Step : 2 link needed fromValidation css and js  file like as vedio.

<link href="~/Plug/bootstrapvalidator-master/dist/css/bootstrapValidator.css" rel="stylesheet" />
<script src="~/Plug/bootstrapvalidator-master/dist/js/bootstrapValidator.js"></script>

Step : 3 Create view like as vedio.

Index.cstml

<br />
<div class="container">
    @using (Html.BeginForm("Index", "Home", new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post, new { id = "addUser" }))
    {
        <div class="form-group">
            <label class="col-md-3">Username:</label>
            <input class="form-control User" name="Username" placeholder="Enter Name" />
        </div>
        <div class="form-group">
            <label class="col-md-3">Password:</label>
            <input class="form-control pwd" name="Password" placeholder="Enter Password" />
        </div>
        <div class="button">
            <button>Submit</button>
        </div>
        <div>
            @Html.ValidationSummary(true)
        </div>
    }
</div>

Step:4 Now write jquery method for from Validation [show display error message] like as vedio

<script type="text/javascript">
    $(document).ready(function () {
        $('#addUser').bootstrapValidator({
            fields: {
                Username: {
                    selector: '.User',
                    message: 'name not valid',
                    validators: {
                        notEmpty: {
                            message:'Name can not empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 12,
                            message:'Name will be 6 to 12 digite'
                        }
                    }
                },
                Password: {
                    selector: '.pwd',
                    message: 'Password not valid',
                    validators: {
                        notEmpty: {
                            message: 'Password can not empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 12,
                            message: 'Password will be 6 to 12 digite'
                        }
                    }
                }
            }
        })
    })
</script>

Now run the project

About Teacher

Reza Karim

Software Engineer

More about him